<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
defineOptions({ name: 'articlePage' });
import { whManagerBsTbThirdUnitGetAppPageUsingPost } from '@/genapi/wh';

const router = useRouter();
function returnClick() {
	router.replace('/home');
}

const val1 = ref('a');
const val2 = ref('a');
const options1 = ref([
	{ text: '所有等级', value: 'a' },
	{ text: '特级资质', value: '0' },
	{ text: '一级资质', value: '1' },
	{ text: '二级资质', value: '2' },
	{ text: '三级资质', value: '3' },
]);
const options2 = ref([
	{ text: '所有类别', value: 'a' },
	{ text: '承包商', value: '1' },
	{ text: '供应商', value: '2' },
	{ text: '第三方机构', value: '3' },
]);

const data = ref<Record<string, any>>([]);
function thirdClick() {
	router.replace({ path: '/home/createThird' });
}

whManagerBsTbThirdUnitGetAppPageUsingPost({ data: {} }).then((res) => {
	data.value = res.data?.records;
});

const qualificationLevelType = {
	0: '特级资质',
	1: '一级资质',
	2: '二级资质',
	3: '三级资质',
};

const typeEnue = {
	1: '承包商',
	2: '供应商',
	3: '第三方服务机构',
};
const leftData = ref('a');
const rightData = ref('a');
const onChangeLeft = (val) => {
	leftData.value = val;
	if (val !== 'a' && rightData.value !== 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({
			data: {
				current: 1,
				query: {
					qualificationLevel: val,
					type: rightData.value,
				},
				size: 9999,
			},
		}).then((res) => {
			data.value = res.data?.records;
		});
	} else if (val !== 'a' && rightData.value === 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({
			data: {
				current: 1,
				query: {
					qualificationLevel: val,
				},
				size: 9999,
			},
		}).then((res) => {
			data.value = res.data?.records;
		});
	} else if (val === 'a' && rightData.value === 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({ data: {} }).then((res) => {
			data.value = res.data?.records;
		});
	}
};
const onChangeRight = (val) => {
	rightData.value = val;
	if (val !== 'a' && leftData.value !== 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({
			data: {
				current: 1,
				query: {
					qualificationLevel: leftData.value,
					type: val,
				},
				size: 9999,
			},
		}).then((res) => {
			data.value = res.data?.records;
		});
	} else if (val !== 'a' && leftData.value === 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({
			data: {
				current: 1,
				query: {
					type: val,
				},
				size: 9999,
			},
		}).then((res) => {
			data.value = res.data?.records;
		});
	} else if (val === 'a' && rightData.value === 'a') {
		whManagerBsTbThirdUnitGetAppPageUsingPost({ data: {} }).then((res) => {
			data.value = res.data?.records;
		});
	}
};
</script>

<template>
	<div class="bg-[#F5F7FB]" h-full>
		<div class="header bg-[#ffffff]">
			<div flex justify-center items-center class="title">
				<img src="./assets/return.png" alt="" h-5 w-5 @click="returnClick" absolute left-4 />
				<span>第三方单位</span>
			</div>
			<nut-menu>
				<nut-menu-item v-model="val1" :options="options1" class="leftOption" @change="onChangeLeft" />
				<nut-menu-item v-model="val2" :options="options2" @change="onChangeRight" />
			</nut-menu>
		</div>
		<div class="body">
			<div
				v-for="item in data"
				mb-1
				pl-5
				pr-15
				pt-3
				h-18
				class="bg-[#ffffff] border-[rgba(199, 199, 199, 0.5)]"
				@click="thirdClick"
				border-y
				border-solid
			>
				<div class="titleInBody">
					<span>{{ item.name }}</span>
				</div>
				<div flex items-center justify-between class="contentInBody" mt-1>
					<div>
						<span>资质等级 ：</span><span>{{ qualificationLevelType[item.qualificationLevel] }}</span>
					</div>
					<div>
						<span>单位类别 ：</span><span>{{ typeEnue[item.type] }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.header {
	.title {
		border-bottom: 1px solid rgba(199, 199, 199, 0.5);
		height: 50px;
		color: #1c2023;
		text-align: center;
		font-style: normal;
	}
	.leftOption {
		border-right: 1px solid rgba(199, 199, 199, 0.5) !important;
	}
}
.body {
	overflow-y: scroll;
	margin-top: 7px;
	.titleInBody {
		font-family:
			PingFangSC,
			PingFang SC;
		font-weight: 500;
		font-size: 16px;
		color: #3b445b;
		text-align: left;
		font-style: normal;
	}
	.contentInBody {
		font-family:
			PingFangSC,
			PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #9fb3c6;
		text-align: left;
		font-style: normal;
	}
}
:deep(.nut-icon) {
	color: #c5c8cb;
}
</style>
